<template>
  <view class="detali_swiper">
    <swiper autoplay circular indicator-dots>
      <swiper-item @click="lookPicture(item.pics_mid)" v-for="item in goodsObj.pics" :key="item.pics_id">
        <image :src="item.pics_mid" mode="widthFix" />
      </swiper-item>
    </swiper>
    <view class="goods_price">￥{{goodsObj.goods_price}}</view>
    <view class="goods_name_row">
      <view class="goods_name">{{goodsObj.goods_name}}</view>
      <view class="goods_collect" @click="handleCollect">
        <text class="iconfont" :class="[isCollect?'icon-shoucang1':'icon-shoucang']"></text>
        <veww class="coolect_text">收藏</veww>
      </view>
    </view>
    <view class="goods_info">
      <view class="goods_info_title">图文详情</view>
      <view class="goods_info_content">
        <!-- 富文本 -->
        <rich-text :nodes="goodsObj.goods_introduce">
        </rich-text>
      </view>
    </view>
    <view class="btm_tool">
      <view class="tool_item">
        <view class="iconfont icon-kefu"></view>
        <view>客服</view>
        <button open-type="contact"></button>
      </view>
      <view class="tool_item">
        <view class="iconfont icon-fenxiang-m"></view>
        <view>分享</view>
        <button open-type="share"></button>
      </view>
      <navigator open-type="switchTab" url="/pages/cart/cart" class="tool_item">
        <view class="iconfont icon-gouwuche"></view>
        <view>购物车</view>
      </navigator>
      <view class="tool_item btn_cart" @click="handleCartAdd">加入购物车</view>
      <view class="tool_item btn_buy" @click="goPayOages()">立即购买</view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      isCollect: false,
      goodsObj: {},
      // 商品对象
      GoodsInfo: {},
    };
  },
  onLoad(option) {
    this.getGoodsList(option.goods_id);
  },
  methods: {
    async getGoodsList(goods_id) {
      const res = await request("/goods/detail", { goods_id: goods_id });
      // 1 获取缓存中的商品收藏的数组
      this.GoodsInfo = res.message;
      this.goodsObj = res.message;
      let collect = uni.getStorageSync("collect") || [];

      let aa = collect.filter((v) => {
        // console.log(v.goods_id, this.GoodsInfo.goods_id, "id111");
        return v.goods_id === this.GoodsInfo.goods_id;
      });
      if (aa.length > 0) {
        this.isCollect = true;
      } else {
        this.isCollect = false;
      }
      // console.log(isCollect, "isCollect");

      // this.GoodsInfo = res.message;

      this.goodsObj = {
        goods_name: res.message.goods_name,
        pics: res.message.pics,
        goods_price: res.message.goods_price,
        goods_introduce: res.message.goods_introduce.replace(/\.webp/g, ".jpg"),
      };
    },
    lookPicture(current) {
      const urls = this.goodsObj.pics.map((v) => v.pics_mid);
      uni.previewImage({
        current,
        urls,
      });
    },
    handleCartAdd() {
      let cart = uni.getStorageSync("cart") || [];
      // 判断商品是否已经添加购物车
      let index = cart.findIndex((v) => {
        return v.goods_id === this.GoodsInfo.goods_id;
      });

      if (index === -1) {
        // 不存在 第一次添加
        this.GoodsInfo.num = 1;
        this.GoodsInfo.checked = true;
        cart.push(this.GoodsInfo);
      } else {
        // 已经存在购物车 数量+1
        cart[index].num++;
      }
      uni.setStorageSync("cart", cart);
      uni.showToast({
        title: "加购成功",
        duration: 2000,
        mask: true,
      });
    },
    // 点击 商品收藏图标
    handleCollect() {
      let isCollect = false;
      // 1 获取缓存中的商品收藏数组
      let collect = uni.getStorageSync("collect") || [];
      // 2 判断该商品是否被收藏过
      console.log(collect, "collect");
      // let bb;
      // let index = collect.filter((v, i) => {
      //   v.goods_id === this.GoodsInfo.goods_id;
      // });
      let index = collect.findIndex((v) => {
        return v.goods_id === this.GoodsInfo.goods_id;
      });

      // 3 当index！=-1表示 已经收藏过
      if (index !== -1) {
        // 能找到 已经收藏过了  在数组中删除该商品
        collect.splice(index, 1);
        isCollect = false;
        uni.showToast({
          title: "取消成功",
          icon: "success",
          mask: true,
        });
      } else {
        // 没有收藏过
        console.log(this.GoodsInfo, "this.GoodsInfo");
        collect.push(this.GoodsInfo);
        isCollect = true;
        uni.showToast({
          title: "收藏成功",
          icon: "success",
          mask: true,
        });
      }
      // 4 把数组存入到缓存中
      uni.setStorageSync("collect", collect);
      // 5 修改data中的属性  isCollect
      this.isCollect = isCollect;
    },
    goPayOages() {
      uni.navigateTo({
        url: "/pages/pay/pay",
      });
      console.log("132");
    },
  },
};
</script>

<style lang="less" scpoed>
.goods_info {
  margin-bottom: 150rpx;
  .goods_info_title {
    font-size: 32rpx;
    color: #f95314;
    font-weight: 600;
    padding: 20rpx;
  }
  .goods_info_content {
  }
}
.detali_swiper {
  position: relative;
  swiper {
    height: 65vw;
    text-align: center;
    image {
      width: 60%;
    }
  }
}
.goods_price {
  padding: 15rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: red;
}
.goods_name_row {
  border-bottom: 10rpx solid #e7e7e7;
  border-top: 10rpx solid #e7e7e7;
  padding: 10rpx 0;
  display: flex;
  .goods_name {
    flex: 5;
    color: #000;
    font-size: 30rpx;
    padding: 0 10rpx;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .goods_collect {
    border-left: 1px solid;
    display: flex;
    flex: 1;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    .iconfont {
      font-size: 50rpx;
    }
    .icon-shoucang1 {
      color: #f95314 !important;
    }
    .coolect_text {
      font-size: 28rpx;
    }
  }
}
.btm_tool {
  z-index: 99;
  position: fixed;
  left: 0;
  bottom: 0;
  border: 1px solid #ccc;
  width: 100%;
  height: 90rpx;
  background-color: #fff;
  display: flex;
  .tool_item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 26rpx;
    position: relative;
    button {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
    .iconfont {
      font-size: 38rpx;
    }
  }
  .btn_cart {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #ffa500;
    font-size: 30rpx;
    font-weight: 600;
  }
  .btn_buy {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #eb4450;
    font-size: 30rpx;
    font-weight: 600;
  }
}
</style>
